<template>
    <div>
        
        <button v-for="(btn) in btns" :key="btn.nme" :class="['tabbutton',{'active':btn.url == seccssBtn}]" @click="handleClick(btn.url)">{{btn.nme}}</button>
        <div class="box" :is="seccssBtn"></div>
    </div>
</template>


<script>
import emailCom from './email'
import homeCom from './home'
import mineCom from './mine'

    export default {
          components:{
            emailCom,
            homeCom,
            mineCom
        },
        data(){
            return {
                btns:[
                    {
                        nme:'奥利',
                        url:'emailComerslyghjmdzsgjmdsbzskzs.hrfjsehmgx'

                    },

                    {
                        nme:'法克鱿',
                         url:'homeCom'

                    },

                    {
                        nme:'姬霓太美',
                         url:'mineCom'
                    }
                    ],
                seccssBtn:''

            }
        },
      
        methods:{
            handleClick(btn){
                this.seccssBtn = btn
            }
        },
        // computed:{
        //     dynamic(){
        //         return this.seccssBtn + "-com"
        //     }
        // }
    }
</script>





<style>
    .box{
        width: 200px;
        height: 100px;
        border: 1px solid;
    }
    .tabbutton{
        padding: 2px;
        
    }
    .tabbutton.active{
        background-color: blue;
    }
</style>